/**
* @description: 搜索页
* @author: liang
**/
<template>
  <div class="search-main">
    <nav-bar class="header" back title="搜索" @goBack="onCancel"/>
    <div class="main-container">
      <div class="search-container">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
  </div>
</template>

<script>

import navBar from "../../../components/common/nav-bar";

export default {
  name: "search",
  components: {navBar},
  props: {
    // 每次显示此页时清空搜索框
    empty: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    empty: {
      immediate: true,
      handler: function (newVal) {
        if(newVal) {
          this.value = "";
        }
      }
    }
  },
  data() {
    return {
      value: ""
    }
  },
  methods: {
    onSearch() {
      this.$emit("search", this.value);
      this.value = "";
    },
    onCancel() {
      this.$emit("cancel");
      this.value = "";
    },
  }
};
</script>

<style scoped lang="scss">
.search-main {
  height: 100vh;
  width: 100vw;
  
  .search-container {
    .van-search__action {
      padding: 0 12px;
      color: #417adc;
    }
  }
}

</style>